<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据表格编辑器</title>
    <link href="/themes/icon.css" rel="stylesheet" type="text/css" >
    <link href="/themes/default/easyui.css" rel="stylesheet" type="text/css" >
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery.easyui.min.js"></script>
    <script src="/js/easyui-lang-zh_CN.js"></script>
</head>
<body>
    <table id="dg" style="width:700px;height:500px;" >
    </table>

    <script>
        $(function(){
            
            $('#dg').datagrid({
                title: "图书列表",
                url: "book_list.json",
                method: "get",
                pagination:true, //显示分页栏
                pageNumber:1,
                idField:'id',
                rownumbers: true,
                pageSize:10,
                pageList:[5,10,15,20,30],
                singleSelect:true,
                toolbar:[
                    {
                        text:'Save',
                        iconCls:'icon-save',
                        handler:function(){
                            //alert('Save');
                            if(!isEndEdit()){
                                return;
                            }

                            //根据选中行的索引去取该行数据
                            let row=$('#dg').datagrid("getRows")[editIndex];
                            let ed=$('#dg').datagrid('getEditor',{index:editIndex,field:'category'}); //拿到combobox的编辑器,拿的是当前选中这一行,拿category这一列
                            let categoryId=$(ed.target).combobox("getValue");
                            let categoryName=$(ed.target).combobox("getText");
                            // $('#dg').datagrid("acceptChanges");//接受编辑行的变更
                            // //一定要在acceptChanges,之后再去做刷新行的操作
                            // row.category={id:categoryId,name:categoryName};
                            // $('#dg').datagrid("refreshRow",editIndex);//刷新行

                            //ajax
                            $.ajax({
                                url:'xxxx',
                                method:'post',
                                data:{
                                    id:row.id,
                                    name:row.name,
                                    publishDate:row.publishDate,
                                    price:row.price,
                                    "category.id":categoryId,
                                    "category.name":categoryName
                                },
                                success:function(data){
                                    if(data.status==true){
                                        editIndex=undefined;
                                        $('#dg').datagrid("reload");
                                    }else{
                                        alert(data.message);
                                    }
                                }
                            });

                        }
                    },'-',{
                        text:'Cancel',
                        iconCls:'icon-undo',
                        handler:function(){
                            //alert('Cancel');
                            $('#dg').datagrid('rejectChanges');
                            $('#dg').datagrid('unselectRow',editIndex); //取消选中索引行
                            //$('#dg').datagrid('unselectAll');//取消所有选中
                            editIndex=undefined;//设置编辑行索引为undefined
                        }
                    }
                ],
                columns:[[
                    {field:'id',title:'ID',width:50,align:'center'},
                    {field:'name',title:'书名',width:250,editor:'text'},
                    {field:'publishDate',title:'出版日期',width:100,editor:{
                        type:'datebox',options:{   //options可以设置该列的所有属性
                            formatter:function(date){
                                return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
                            },
                            parser:function(s){
                                if(!s) return new Date();
                                var ss=(s.split("-"));
                                var y=parseInt(ss[0],10);
                                var m=parseInt(ss[1],10);
                                var d=parseInt(ss[2],10);

                                if(!isNaN(y) && !isNaN(m) && !isNaN(d))
                                {
                                    return new Date(y,m-1,d);
                                } else {
                                    return new Date();
                                }

                            },
                            required:true //设置为必填项
                        }
                    }},
                    {field:'price',title:'价格',width:100,editor:{
                        type:'numberbox',options:{ 
                            precision:2,  //设置小数点为2位
                            required:true //设置为必填项
                        }
                    }},
                    {
                        field:'category',title:'分类',width:100,formatter:function(value,row,index){
                        return row.category.name;
                    },editor:{
                        type:'combobox',
                        options:{
                            url:"category.json",
                            method:"get",
                            valueField:"id",
                            textField:"name",
                            required:true //设置为必填项
                        }
                    }}
                ]],
                onClickRow:function(index){
                    //如果编辑的这行和当前点击行的索引不一致
                    if(editIndex!=index){
                        //放弃编辑状态
                        $('#dg').datagrid("rejectChanges",index);
                    }
                    editIndex=index;
                    //让点击的这一行开始编辑
                    $('#dg').datagrid("beginEdit",index);

                    //点击这行还需要datagrid选中这行,因为后期要获取datagrid选中行的数据
                    $('#dg').datagrid("selectRow",index);
                }
            });

        });

        let editIndex;

        function isEndEdit(){
            if(editIndex==undefined){
                return true;
            }

            return $('#dg').datagrid("validateRow",editIndex); //验证指定的行，有效时返回 true。
        }

    </script>
</body>
</html>